#slides img{ margin:0 auto;}
#slider {max-width:1170px;}
#slides { margin: 30px auto ;padding:5px;}
#slider #controls {left: 0;margin: -25px auto 0;position: absolute;right: 0;top: 50%;}
#slider #active {left: 5px;margin: 30px auto;position: absolute;right: 5px;top: 100%;}
#slider #slides article{width: 25%;}
#slider #slides .inner{width:400%}
#slide1:checked ~ #slides .inner { margin-left:-0%; }#slide2:checked ~ #slides .inner { margin-left:-100%; }#slide3:checked ~ #slides .inner { margin-left:-200%; }#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide1:checked ~ #active label:nth-child(1){color:#0070C6;}
#slide2:checked ~ #active label:nth-child(2){color:#0070C6;}
#slide3:checked ~ #active label:nth-child(3){color:#0070C6;}
#slide4:checked ~ #active label:nth-child(4){color:#0070C6;}
#slider input{display:none}
#slide1:checked ~ #slides .inner{margin-left:0}
#slide2:checked ~ #slides .inner{margin-left:-100%}
#slide3:checked ~ #slides .inner{margin-left:-200%}
#slide4:checked ~ #slides .inner{margin-left:-300%}
#slide5:checked ~ #slides .inner{margin-left:-400%}
#slider #overflow{width:100%; overflow:hidden}
#slider #controls{width:88%; margin:0 auto}
#slider article img{width:90%; margin:5px auto; padding:0}
#slider #slides .inner{width:500%; line-height:0}
#slider #slides article{width:20%; float:left; text-align:left}
#slider #active{font-family:'courier',serif; text-align:left;}
#slider #active label{display:inline-block; width:25%; border-top:1px solid #959595; margin:0;padding:15px 0; cursor:pointer}
#slider #active label:before{ content: "/ "}
#slider #active label:hover{border-top:2px solid #bbb; border-color:#777 !important}
#active{font-family:'courier',serif; text-align:left}
#active label{display:inline-block;  margin:0; padding:10px 10px 0 0; cursor:pointer;float:right;}
#active label:before{ content: "/ "}
#active label:hover{color:#0070C6;}
#slide1:checked ~ #active label:nth-child(1), 
#slide2:checked ~ #active label:nth-child(2), 
#slide3:checked ~ #active label:nth-child(3), 
#slide4:checked ~ #active label:nth-child(4), 
#slide5:checked ~ #active label:nth-child(5){color:#0070C6;}
#slides img{margin:0 auto; background:#fff; padding:15; width:90%}
#slides .inner{-webkit-transform:translateZ(0); -webkit-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000); -moz-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);  -ms-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);  -o-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);  transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000); /* easeInOutQuart */-webkit-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000); -moz-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);  -ms-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);  -o-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);  transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000); /* easeInOutQuart */}
#slider{-webkit-transform:translateZ(0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; margin:0 auto 40px auto; position:relative}
#controls label{-webkit-transform:translateZ(0); -webkit-transition:opacity 0.2s ease-out; -moz-transition:opacity 0.2s ease-out; -o-transition:opacity 0.2s ease-out; transition:opacity 0.2s ease-out}
#slides, #active, #active label, .info h3, .desktop, .tablet, .mobile{-webkit-transform:translateZ(0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out}
#tablet:checked ~ #slider #slides, #mobile:checked ~ #slider #slides{padding:1%; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px}#tablet:checked ~ #slider #active{margin:22% 0 0}#mobile:checked ~ #slider #active{margin:23% 0 0}#mobile:checked ~ #slider #slides .info{opacity:0 !important}
@media only screen and (max-width:850px) and (min-width:450px){#slider #slides{padding:1%; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px} }
@media only screen and (max-width:850px){#slider #controls label{margin:0!important} }
@media only screen and (max-width:450px){#slider #slides{padding:1% 0; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px}#slider #slides .info{opacity:0 !important} }

